<template>
  <div>
    <button
      v-for="(item, index) in tabs"
      :key="index"
      @click="currentTab = item.comName"
    >
      {{ item.name }}
    </button>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>


    <!-- 以英文逗号分隔的字符串  
<KeepAlive include="ComA,ComB">
  <component :is="currentTab" />
</KeepAlive> -->

  <!-- 正则表达式 (需使用 `v-bind`) :include="/ComA|ComB/"-->
  <!-- 数组 (需使用 `v-bind`) :include="['ComA', 'ComB']"-->
  </div>
</template>

<script setup lang="ts">
import ComA from '../../components/reactive/Reactive.vue'
import ComB from '../../components/reactive/RefDemo.vue'
import { reactive, shallowRef } from 'vue'

// reactive 会使数据变成响应式，此处为了节省性能开销，可以使用 shallowRef 或者 markRaw 跳过 proxy 代理
const currentTab = shallowRef(ComA)
const tabs = reactive([
  {
    name: 'ComA',
    comName: shallowRef(ComA)
  },
  {
    name: 'ComB',
    comName: shallowRef(ComB)
  },
])
</script>

